<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/vue.js"></script>
		<title></title>
	</head>
	<body>
		<div id="app">
			<tml>
			</tml>
			
			<anchored-heading :level="3">Hello world!</anchored-heading>
			
		</div>
	</body>
	<script type="text/javascript">
		
		// 注册一个全局自定义指令 `v-focus`
		/* Vue.directive('focus', {
		  // 当被绑定的元素插入到 DOM 中时……
		  inserted: function (el) {
			// 聚焦元素
			el.focus()
			console.log("fcous");
		  }
		}) */
		
		// 注册一个局部自定义指令 `v-focus`
		var tml={
			directives: {
				// 指令的定义
			  focus: {
				// 指令对象的钩子函数
				inserted: function (el,binding) {
					console.log(binding.name);
					el.focus();
					el.style="border-color:red;";
					console.log(el);
				},
				update:function(el){
					console.log("update");
					
				}
			  }
			},
			template:`<input v-focus>`
		}
		
		// render渲染
		Vue.component('anchored-heading', {
		  render: function (element) {
			return element(
			  'h' + this.level,   // 标签名称
			  // 通过 this.$slots 访问静态插槽的内容，得到的是一个 VNodes 数组
			  this.$slots.default // 子元素数组
			)
		  },
		  props: {
			level: {
			  type: Number,
			  required: true
			}
		  }
		})
		var app=new Vue({
			el:'#app',
			components:{
				'tml':tml
			}
			
		})
		
		
	</script>
	
</html>
